<template>
  <div class="records">
    <div class="recordsTit">
      <span>浏览足迹</span>
      <span
        v-if="!isEdit"
        class="batch"
        @click="showEdit"
      >批量管理</span>
      <div v-else class="saveList">
        <el-checkbox
          v-model="selectAll"
          @change="changeChecked"
        >全选</el-checkbox>
        <span class="delete" @click="deleteFun">删除</span>
        <span class="save" @click="saveList">保存</span>
      </div>
    </div>
    <div v-loading="listLoading">
      <div
        class="list sub-main"
        v-if="recordList?.length">
        <div
          class="recordsList"
          v-for="(item,index) of recordList" :key="index"
        >
          <div class="topTime">{{ item.createTime }}</div>
          <div class="listBox">
            <div
              class="recordsItem"
              v-for="(child,inx) of item.products"
              :key="child.footprintId"
              :class="{
                selected: child.selected,
                isEdit: isEdit
              }"
              @click="select(index,inx)"
            >
              <div class="mc" v-if="isEdit"></div>
              <div class="imgBox">
                <span
                  class="delBtn hiddenBtn"
                  @click="del(child.productId,item.createTime)"
                >
                  <svg-icon
                    name="del"
                    style="width: 30px; height: 30px;"
                  />
                </span>
                <img :src="child.image" alt="" />
                <span
                  class="detailBtn hiddenBtn"
                  @click="toProductDetail(child)"
                >查看详情</span>
              </div>
              <div class="info">
                <h3 class="overflow">
                  {{ child.productName }}
                </h3>
                <span class="price">¥{{ child.price }}</span>
              </div>
            </div>
            <div class="clearfix"></div>
          </div>
        </div>
        <el-pagination
          :hide-on-single-page="true"
          background
          layout="prev, pager, next, jumper"
          :current-page="page.page"
          :page-size="page.pageSize"
          :total="page.total"
          @current-change="handleCurrentChange"
        />
      </div>
      <div class="nothing sub-main" v-else>
        <svg-icon style="width: 240px; height: 240px; margin-bottom: 20px;" name="user-foot-nodata" />
        <p class="fs20 font-color-999">
          你还没有浏览记录～
        </p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineComponent, onBeforeMount, reactive, ref, shallowRef } from 'vue'
import { useRouter } from 'vue-router';
import {
  getFoots,
  deleteFoots
} from '@/api/user/user.js'

import SvgIcon from '@/components/svgIcon/index.vue';

defineComponent({
  name: 'BrowseRecords'
})
const router = useRouter();
let page = reactive({
  page: 1,
  pageSize: 4,
  total: 0
})
let listLoading = shallowRef(false);
let recordList = ref([]);
// 我的足迹
function getFootprint () {
  listLoading.value = true;
  getFoots({
    page: page.page,
    pageSize: page.pageSize
  }).then(response => {
    const res = response.data;
    if (res.code === "200") {
      recordList.value = res.data && res.data.list || [];
      page.total = res.data && parseInt(res.data.total) || 0;
    }
  }).catch(err => ElMessage.error(err.message))
    .finally(() => listLoading.value = false)
}
// 翻页
function handleCurrentChange (val) {
  page.page = val;
  getFootprint();
}

/**
 *
 */
let isEdit = shallowRef(false);
let selectAll = shallowRef(false);
// 保存
function saveList () {
  isEdit.value = false;
}
// 选择
function select (index, inx) {
  // if (this.recordList[index].products[inx].selected === 1) {
  //   this.recordList[index].products[inx].selected = 0;
  // }
  // else {
  //   this.recordList[index].products[inx].selected = 1;
  // }
  recordList.value[index].products[inx].selected = recordList.value[index].products[inx].selected ? 0 : 1
  selectAll.value = true;
  recordList.value.map(i => {
    i.products.map(j => {
      if (j.selected === 0) {
        selectAll.value = false;
      }
    });
  });
}
// 全选
function changeChecked () {
  recordList.value.forEach(item => {
    item.products.forEach(jtem => {
      jtem.selected = selectAll.value
    });
  });
}
// 编辑
function showEdit () {
  if (recordList.value.length === 0) {
    return;
  }
  isEdit.value = true;
}

/***
 * 删除浏览记录
 */
// 删除浏览记录请求
function delFootprint (ids, times) {
  deleteFoots({
    ids: ids,
    times: times
  }).then(response => {
    const res = response.data;
    if (res.code === "200") {
      ElMessage.success("删除成功");
      isEdit.value = false;
      selectAll.value = false
      getFootprint();
    }
  }).catch(err => ElMessage.error(err.message))
}
// 删除单个浏览记录
function del (id, time) {
  let ids = [id];
  let times = [time];
  delFootprint(ids, times);
}
// 删除选中浏览记录
function deleteFun () {
  let flag = false;
  let ids = [];
  let times = [];
  for (let i in recordList.value) {
    for (let k in recordList.value[i].products) {
      const item = recordList.value[i].products[k]
      if (item.selected) {
        flag = true;
        ids.push(item.productId);
        times.push(recordList.value[i].createTime);
      }
    }
  }
  if (!flag) {
    return ElMessage.warning("请先选中需要删除的记录");
  }
  ElMessageBox.confirm(
    "此操作将删除选中的记录, 是否继续?",
    "提示",
    {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning"
    }
  ).then(() => {
    delFootprint(ids, times);
  }).catch(() => {
  });
}

// 商品详情
function toProductDetail (item) {
  router.push({
    path: "/productDetail",
    query: {
      proData: JSON.stringify({
        productId: item.productId,
        shopId: item.shopId,
        skuId: item.skuId
      })
    }
  });
}

onBeforeMount(() => {
  getFootprint()
})
</script>

<style lang="scss" scoped>
  .records {
    border: 1px solid #E5E5E5;
    .recordsTit {
      padding: 0 25px;
      background-color: #F3F4F5;
      border-bottom: 1px solid #F5F5F5;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15px;
      span {
        display: block;
        height: 60px;
        line-height: 60px;
      }
      span:first-child {
        color: #333;
        font-size: 18px;
        // border-bottom: 3px solid $mainGlod;
      }
      .batch {
        width: 104px;
        height: 40px;
        line-height: 40px;
        color: #333;
        font-size: 12px;
        text-align: center;
        background: #FFF;
        cursor: pointer;
      }
      .saveList {
        display: flex;
        align-items: center;
        span {
          margin-left: 50px;
          cursor: pointer;
          color: #333333;
          font-size: 14px;
        }
        span.save {
          width: 104px;
          height: 40px;
          background: #FFFFFF;
          color: $mainGlod;
          text-align: center;
          line-height: 40px;
        }
      }
    }
    .list {
      .recordsList {
        margin-bottom: 20px;
        background-color: #F5F5F5;
        .topTime {
          padding: 15px 30px;
          color: #FFF;
          background-color: #333;
          font-size: 14px;
          font-weight: bold;
        }
        .listBox {
          padding: 10px;
          .recordsItem {
            width: 18%;
            // height: 330px;
            float: left;
            margin: 10px;
            position: relative;
            border: 1px solid transparent;
            .imgBox {
              width: 100%;
              height: 240px;
              // border: 1px dashed #333;
              box-sizing: border-box;
              position: relative;
              &:hover .hiddenBtn{
                display: block;
              }
              .hiddenBtn{
                display: none;
              }
              .delBtn{
                font-size: 32px;
                cursor: pointer;
                position: absolute;
                right: 5px;
                top: 5px;
              }
              .detailBtn{
                width: 100%;
                height: 40px;
                line-height: 40px;
                text-align: center;
                color: #FFF;
                background-color: rgba($color: #333, $alpha: .8);
                cursor: pointer;
                position: absolute;
                left: 0;
                bottom: 0;
              }
              img {
                width: 100%;
                height: 99%;
              }
            }
            .info {
              border: 1px solid #E5E5E5;
              text-align: center;
              padding: 0 15px 15px;
              h3 {
                font-size: 14px;
                color: #333333;
                height: 30px;
                line-height: 30px;
                margin-top: 10px;
              }
              span {
                color: $mainGlod;
                font-size: 14px;
              }
            }
          }
          .recordsItem:nth-child(5n) {
            margin-right: 0;
          }
          // .isEdit:before {
          //   content: "";
          //   background: url("./../../../assets/images/noEdit.png");
          //   width: 58px;
          //   height: 58px;
          //   position: absolute;
          //   right: 0;
          //   top: 0;
          //   display: block;
          //   background-size: contain;
          // }
          // .selected:before {
          //   background: url("./../../../assets/images/isEdit.png");
          //   background-size: contain;
          // }
          .selected{
            border-color: $mainGlod;
          }
        }
      }
      :deep(.el-pagination){
        margin: 30px 0 20px 0;
      }
    }
    .sub-main{
      min-height: 400px;
    }
    .nothing{
      width: 100%;
      text-align: center;
      min-height: 400px;
      p{
          margin-bottom: 20px;
      }
      .el-button{
          background-color: #FF7800;
          color: #FFFFFF;
          font-weight: normal;
          border-radius: 0;
      }
    }
    .mc{
      position: absolute;
      width: 100%;
      height: 100%;
      opacity: 0;
    }
  }
</style>
